<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link href="http://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css">
      <title>Create Survey</title>
      <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}/testapp.css" />
      <script type="text/javascript">
	var i = 0;
	
	function addQuestion() {
	    var form = document.getElementById('survey_form');
	    var new_text_area = document.createElement('textarea');
	    new_text_area.setAttribute('name', 'area_' + ++i);
	    new_text_area.setAttribute('cols', '40');
	    new_text_area.setAttribute('rows', '8');
	    form.insertBefore(new_text_area, document.getElementById('submit_button'));
	    form.insertBefore(document.createElement('br'), document.getElementById('submit_button'));
	}
      </script>
    </head>
    <body>
      <h1>Create survey</h1>
      {% if title_err %}
	<h2>{{ title_err }}</h2>
      {% endif %}
      {% if questions_err %}
	<h2>{{ questions_err }}</h2>
      {% endif %}
      <form action="/testapp/create" method="post" id="survey_form">
	{% if questions %}
	  {% for q in questions %}
	    Question:
	    <textarea rows="8" cols="40" name="area_{{ forloop.counter }}">{{ q }}</textarea><br />
	  {% endfor %}
	{% else %}
	  Title:
	  <input type="text" name="title"/><br />
	  <textarea rows="8" cols="40" name="area_0"></textarea><br />
	{% endif %}
	<input type="submit" value="Create survey" class="button" id="submit_button"/><br />
      </form>
      <button onclick="addQuestion();">add question</button>
    </body>
  </html>
